<template>

	<!-- 自定义navbar组件【放在窗体外部，否则被content占据间距】 -->
	<CustomNavbar navTitle='销售单' :isTitleStyle="true"></CustomNavbar>

	<view class="container">
		<!-- 下拉刷新区域 -->
		<scroll-view scroll-y="true" style="height: 100vh;" :refresher-enabled="true"
			:refresher-triggered="isRefreshing"
			 @refresherrefresh="onRefresh" 
			 @scrolltolower="onReachBottom"
			refresher-background="#f7f7f7">

			<view v-if="dataList.length > 0">
				<!--循环列表-->
				<view class="item mb20 container" v-for="(item,index) in dataList" :key="index">
				<!-- 	<view class="left">
						<image :src="'http://192.168.1.7/storage/'+item.bigImage" mode="aspectFit"></image>
						<image :src="item.bigImage" mode="aspectFit"></image>
					</view> -->
					<view class="center">
						<view class="conBox">
							<view>
								<view class="u-color con">商品名称：</view>{{item.title}}
							</view>
							<view>
								<view class="u-color con">单品编码：</view>{{item.sku}}
							</view>
							<view>
								<view class="u-color con">销售单价：</view>
								<view class="red fw">{{item.purchasePrice}}</view>
							</view>
							<view>
								<view class="u-color con">销售总价：</view>
								<view class="red">{{item.totalPrice}}</view>
							</view>
						</view>
					</view>
					<view class="right">
						<view class="btn">
							<uni-icons type="compose mr10" size="26" class="u-warn-color"
								@tap="handleUpdate(item.id)"></uni-icons>
							<uni-icons type="trash-filled mr10" size="26" class="u-danger-color"
								@tap="handleDelte(item.id)"></uni-icons>
							<!-- <uni-icons type="settings-filled" size="26" class="u-primary-color"
								@tap="handleUpdateSpec(item.id)"></uni-icons> -->
						</view>
					</view>
				</view>
				<button v-if="loadingMore" @tap="onReachBottom" class="fz24">点击加载更多</button>
			</view>
			<view v-else class="flex mt20">
				<image src="/static/image/noData.png" class="noData"></image>
				<view class="mt20">暂无数据</view>
			</view>
		</scroll-view>
	</view>

	<CustomAddBtn path="/pages/order/sale/update?navTitle=新增订单"></CustomAddBtn>

</template>

<script>
	import CustomNavbar from "@/components/CustomNavbar.vue"
	import CustomAddBtn from "@/components/CustomAddBtn.vue"
	import {
		orderApi
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				dataList: [],
				page: 1,
				pageSize: 7,
				isRefreshing: false,
				total: 0,
				loadingMore: true,
				loadingStatus: false //是否可以触发触底
			}
		},
		components: {
			CustomNavbar,
			CustomAddBtn
		},
		onLoad() {
			this.initData(false)
		},
		methods: {
			initData(data) {
				this.loadingStatus = false;
				uni.showToast({
					title: '正在加载数据...',
					icon: 'none',
					duration: 500
				});
				orderApi.getSaleOrderList({page:this.page,'pageSize':this.pageSize}).then(res => {
					if (res) {
						if (data) {
							this.dataList = [...this.dataList,...res.data] //追加
						} else {
							this.dataList = res.data //重置数据
						}
						this.total = res.total;
						this.loadingStatus = true;
						
						if (this.page == Math.ceil(this.total/this.pageSize)) {
							this.loadingMore = false; //隐藏加载更多
						}
						uni.showToast({
							title: '加载成功',
							icon: 'none',
							duration: 500
						});
					}
				})
			},
			//下拉刷新
			async onRefresh() {
				this.isRefreshing = true
				this.page = 1
				await this.initData(false)
				this.isRefreshing = false
				uni.showToast({
					title: '刷新成功',
				})
			},
			//触底加载
			onReachBottom() {
				if (this.loadingStatus) {
					if (this.page < Math.ceil(this.total/this.pageSize)) {
						this.page++;
						this.initData(true)
					} else {
						uni.showToast({
							title: '没有更多了...',
							icon: 'none',
							duration: 500
						});
					}
				}
			},
			//编辑
			handleUpdate(data) {
				uni.navigateTo({
					url: "/pages/order/sale/update?id=" + data + "&navTitle=编辑进货单"
				})
			},
			//删除
			handleDelte(data) {
				const that = this;
				uni.showModal({
					title: '提示',
					content: '您确定要执行此操作吗？',
					showCancel: true, //是否显示取消按钮，默认为true
					cancelText: '取消', //取消按钮的文字，默认为"取消"
					cancelColor: '#000000', //取消按钮的文字颜色，默认为"#000000"
					confirmText: '确定', //确定按钮的文字，默认为"确定"
					confirmColor: '#3CC51F', //确定按钮的文字颜色，默认为"#3CC51F"
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							//执行确认后的操作
							orderApi.deleteSaleOrder({
								id: data
							}).then(() => {
								uni.showToast({
									title: '操作成功',
									icon: 'success',
									duration: 1000
								});
								that.initData()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
							//执行取消后的操作
						}
					}
				});
			},
		}
	}
</script>

<style>
	.list-item {
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		border-bottom: 1rpx solid #eee;
	}
	.refresh-indicator {
		display: flex;
		justify-content: center;
		padding: 20rpx 0;
	}
	.item {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		image {
			width: 200rpx;
			height: 200rpx;
		}
		.title {
			font-weight: bold;
		}
		.conBox {
			view {
				display: flex;
			}

			.con {
				width: 160rpx;
				display: flex;
				flex-direction: row;
				justify-content: right;
			}
		}
	}
</style>